<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第三次周考</title>
		<style type="text/css">
			body {
				height: 100%;
				width: auto;
				background: url("img/beijing.jpg") no-repeat;
				background-size: 100% 100%;
			}

			#tup {
				height: 120px;
				width: auto;
				margin-left: -100px;
				text-align: center;
			}

			#tub {
				height: 100px;
				width: 100px;
				margin-top: 10px;
				border-radius: 50px;
				border: 1px solid #545454;
			}

			#zhut {
				height: 600px;
				width: auto;
				/* border: 1px solid red; */
				margin-top: 10px;
				text-align: center;
				
			}

/* <!-- -------------------昵称--邮箱--手机----------		 */
			.user{
				height: 30px;
				width: 290px;
				padding-left:10px ;
				
				border-radius: 5px;
				text-color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
				float: left;
			}
			
			
 /* ----------------海外手机------------------- -- */
	
			#tphone{
				height: 30px;
				width: 410px;	
				
				margin: auto;
				text-align: left;
				
			}	
/* -------------------验证码----------------------- */
			#yz{
				height: 36px;
				width: 410px;
				margin: auto;
				border-radius: 5px;
				/* border: 1px solid red; */
				
			}
			.ya1{
				height: 30px;
				width: 194px;
				border-radius: 5px;
				padding-left: 5px;
				border: 1px solid #545454;
				text-align: left;
				color: #545454;
				float: left;
				background-color: transparent;
			}
			.ya2{
				height: 30px;
				width: 83px;
				margin-left: 10px;
				border-radius: 5px;
				text-align: center;
				color:  #545454;
				border: 1px solid #545454;
				float: left;
				font-size: 20px;
				background-color: transparent;
			}
			/* <!-- -----密码框----------------- --> */
			#user_pwd{
				
				height: 30px;
				width: 290px;
				padding-left:10px ;
				border-radius: 5px;
				text-color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
				float: left;
			}
		/* - --------------------同意------------	 */
			#ty{
				height: 30px;
				width: 410px;
				font-size: 12px;
				margin: auto;
				
				text-align: left;
			}
			#inf3{
				color: #2C5B80;
			}

			#inf2{
				color: #7A7A7A;;
			}
			/* - ---------注册------------------- */
			#sub{
				height: 30px;
				width: 300px;
				padding-left:10px ;
				border-radius: 5px;
				color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
				float: left;
			}
			
			/* -------------最下方跳转---------------- */
			.login{
				/* display: block; */
				margin: auto;
				height: 32px;
				width: 410px;
				/* border: 1px solid dodgerblue; */
				text-align: center;
				
				color: #7A7A7A;
			}
			.login .login1{
				height: 30px;
				width: 200px;
				margin-left: 15%;
				margin-top: -1px;
				/* border: 1px solid yellow; */
				line-height: 30px;
			}
			.login1 a{
				color: #7A7A7A;
				/* border: 1px solid red; */
			}

			/* --------------p标签-------------------- */
			p{
				width: 410px;
				height: 33px;
				/* border: 1px solid red; */
				margin: 20px auto ;
			}
			
			
			/* -----------------------span提示 ----*/
			
			.msg{
				display: block;
				width: 100px;
				height: 30px;
				/* border: 1px solid yellow; */
				font-size: 13px;
				color: #7A7A7A;
				float: left;
				line-height: 30px;
			}
			/* ----------------------注册提示------------------------- */
			p #msg_btn{
				margin-left: 40%;
			}
			
		</style>
	</head>
	<body>
		<div id="tup">
			<img src="./img/tubiao.png" id="tub">
		</div>
		<div id="zhut">
			<form action="#" method="post">
				<!-- ----------------------昵称------------- -->
				<p><input type="text" class="user" id="user_u" placeholder="请输入您的昵称" />
				<span id="msg_user" class="msg"></p>
				<p><input type="text" class="user" id="user_email" placeholder="请输入您的邮箱" />
				<span id="msg_email" class="msg">
				<!-- ----------------------手机------------- -->	
				<p><input type="text" class="user" id="user_phone" placeholder="请输入您的手机号" />
				<span id="msg_phone" class="msg">
				<!-- <p><span id="msg_isphone" class="msg"></span> -->
				
				<!-- ----------------海外手机------------------- -->
		
				<div id="tphone">
					<input type="radio" id="tphone1" value="1" />
					<label for="tphone1" class="tphone2" style="color: #5D5F63;" >这是一个海外手机号</label>
			
				</div>
	
<!-- ---------------------验证码-------------------------- -->
				<div id="yz">
					<input type="text" class="ya1" id="ya1" value='' placeholder="请输入您的验证码" />
<!-- 					<span id="ya1" class="ya1" >
						请输入您的验证码
					</span> -->
					<span id="ya3" class="ya2"> 4TU8 </span>
						
					<span id="user_yzm" class="msg"></span>
				</div>
				
					
				
				<!-- -----密码框----------------- -->
				<p><input type="password" id="user_pwd" placeholder="密码至少为9位" />
				<span id="msg_pwd" class="msg"></p>
					<!-- --------------------同意-------------------------- -->
				<div id="ty">
					<input type="radio" id="inf" value="1" />
					<label for="inf" class="inf1">
						<span id="inf2">
							我已阅读同意
						</span>
						<span id="inf3">
							<a href="../img/用户注册协议.pdf">
								《用户注册协议》
							</a>
							<a href="../img/隐私政策.pdf">
								《隐私权政策》
							</a>
							
						</span>
						
					</label>
					
					
				</div>

					<!-- ---------注册------------------- -->
				<p><input type="button" id="sub" value="注册" /></p>
				<p><span id="msg_btn" class="msg">
				
				
				<div class="login">
					<p class="login1">
						<span>已有账号？请</span>
						<a href="./login.html" >&nbsp;登录</a>
					</p>
				</div>	
					
			</form>
		</div>
		<script >
			// -----------------------------是否能成功注册----------------------
			let userIsnNull  = false				// 用户名为空
			let phoneIsnNull = false			// 手机号是否11位
			let emailIsnNull = false           // 邮箱是否为空
			let pwdIsnNull   = false             // 密码是否为空
			let yazIsnNull   = false             // 验证码是否错误
			let isPhoneZc = false  			 //  手机号是否已经注册过
											   
			let b =''							//  验证码存储		
		
			// -----------------------------加载完窗口-执行---------------------
			window.onload = function(){
				yaz()
				
			}
		// ----------------------------随机生成-验证码-------------------
		function yaz(){
		
			let yanArr = [36]
			for(let i=0; i<36; i++){
				if(i<26){
					yanArr[i] = String.fromCharCode(i+65)
				}else{
					yanArr[i] =parseInt(i-26)
				}
				
			}
			var a=[4]
			
			for(let j=0; j<4; j++){
				a[j] = yanArr[parseInt(Math.random()*yanArr.length)] 
			}
			b = a.join("");   
			ya3.innerHTML = b  
		
				
		}

	// ----------------------------------验证码查看框点击事件-----------------------	
		ya3.onclick = function(){
			yaz()
			
		}
		
		
	
	// ----------------------------------验证码输入框失去焦点---------------		   
			ya1.onblur = function(){
				  	// 验证码是否错误
				let ya = ya1.value.toUpperCase()
				console.log( ya)
				ya1.value = ya
				console.log(b)
				if(ya===''){
					
				}else{
					if(ya!==b ){
						yazIsnNull = true   	// 验证码是否错误
						user_yzm.innerHTML = '验证码错误'
						yaz()
					}else{
						yazIsnNull = false 
						user_yzm.innerHTML = '验证码正确'
					}
				}

			}
	// ------------------------用户名-失焦判空------------------------------		
			user_u.onblur = function(){
				let user = user_u.value
				if(user.length==0){
					userIsnNull = true				// 用户名为空
					msg_user.innerHTML = '用户名不能为空'
				}else{
					userIsnNull = false				// 用户名不为空
					msg_user.innerHTML = ''
				}
				
			}
			
	// ------------------------手机号-------------------------------
			user_phone.onblur = function(){
				let phone = user_phone.value
				console.log(phone)
				if(phone.length!==11){
					phoneIsnNull = true			// 手机号不是11位
					msg_phone.innerHTML = "手机号为11位"
					// msg_isphone.innerHTML = ''		//  当手机号不为11位时，不提示是否注册过
				}else{
					phoneIsnNull = false			// 手机号是11位
					msg_phone.innerHTML = ""		//  当手机号是11位时，输入提示取消
		// -----------------------检查是否注册过-----------------------------
					let xhr = new XMLHttpRequest()
					// http://127.0.0.1:3000/v1/user/phone?uphone=12345678911
					let url = `/v1/user/phone?uphone=${phone}`
					console.log(url)
					xhr.open('GET',url)
					xhr.onload = function(){
						let result = xhr.responseText
						console.log(result)
						console.log(result.length)
						
						if(result.length>2){
							isPhoneZc = true  			 //  手机号已经注册过
							msg_phone.innerHTML = '手机号已注册'		
							
						}else{
							isPhoneZc = false  			 //  手机号没有已经注册过
							msg_phone.innerHTML = '手机号可注册'
						}
						
					}
					xhr.send()
				}	
							
				
			}
			// ---------------------密码为9位-----------------
			user_pwd.onblur = function(){
				let p = user_pwd.value
				console.log(p)
				if(p.length<9){
					pwdIsnNull = true             // 密码为空
					msg_pwd.innerHTML = "密码至少为9位"
				}else{
					pwdIsnNull = false             // 密码不为空
					msg_pwd.innerHTML = ""
				}	
				
			}
			// ---------------------邮箱不能为空？---------
			user_email.onblur = function(){
				let p = user_email.value
				console.log(p)
				if(p.length==0){
					emailIsnNull = true           // 邮箱为空
					msg_email.innerHTML = "邮箱不能为空"
				}else{
					emailIsnNull = false           // 邮箱不为空
					msg_email.innerHTML = ""
				}	
			
			}
// ---------------------------------------注册 按钮点击事件---------------------
			sub.onclick = function(){
				let user = user_u.value
				let uemail = user_email.value
				let uphone = user_phone.value
				let pwd = user_pwd.value
				console.log(userIsnNull , phoneIsnNull , emailIsnNull 
					, pwdIsnNull , yazIsnNull)
				if(isPhoneZc){
					alert('用户已存在，请使用个人手机号注册')
					return;
				}	
				if(!userIsnNull && !phoneIsnNull && !emailIsnNull 
					&& !pwdIsnNull && !yazIsnNull){
						
					let xhr = new XMLHttpRequest()
					let url = `/v1/user/add`
					console.log(url)
					xhr.open('POST',url)
					xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8')
					xhr.onload = function(){
						let result = xhr.responseText
						alert('注册成功')						
					}
					let data = `user=${user}&uemail=${uemail}&uphone=${uphone}&pwd=${pwd}`		
					xhr.send(data)	
				}else{
					alert('请按要求重新输入')
					return ;
				}
				window.open('login.html')
				
				
			}



		</script>
		
	</body>
</html>

